<!DOCTYPE html>
<html>
    <head>
        <title>event bind</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.modern.min.js" ></script>
        <style>
           .ms-hover div:hover{
                background:yellowgreen;
            }
        </style>
        <script type="text/javascript">
            // 此例有问题
            var model = avalon.define({
                $id: "test",
                aaa: "1111",
                nan: NaN,
                object: {a: 1, b: 2},
                array: [1, 2],
                ddd: "1",
                $skipArray: ["ddd"],
                click: function(a) {
                    if (a == "object") {
                        model[a] = {a: 1, b: 2}
                    } else if (a == "array") {
                        model[a] = [1, 2]
                    } else if (a == "nan") {
                        model[a] = NaN
                    } else {
                        model[a] = "1111"
                    }
                }
            })
            model.$watch("$all", function(name, a, b) {
                console.log(name, a, b)
            })
            

            
        </script>
    </head>
    <body>
        <div ms-controller="test" class='ms-hover'>
            <div ms-click="click('aaa')">{{aaa}}</div>
            <div ms-click="click('nan')">{{nan}}</div>
            <div ms-click="click('object')">
                <div ms-repeat='object'>{{$key}}</div>
            </div>
            <div ms-click="click('array')">
                <div ms-repeat='array'>{{el}}</div>
            </div>
            <div ms-click="click('ddd')">{{ddd}}</div>
        </div>

       
    </body>
</html>
